<template>
  <view style="background-color: #fff; padding-top: 1upx" class="bd">
    <view class="title">
      <text class="txt">产检名称</text>
    </view>
    <view class="art">{{ detail.planName }}</view>
    <view class="title">
      <text class="txt">产检目的</text>
    </view>
    <view class="art" v-html="detail.planGoal">{{ detail.planGoal }}</view>
    <!-- 开关 -->
    <view class="title" v-show="ymType == 'Upcoming' ? false : true">
      <text class="txt">产检状态</text>
    </view>
    <view class="art" v-show="ymType == 'Upcoming' ? false : true">
      <view
        class="flex flex-j-b flex-al-c uni-item-line"
        style="padding: 20upx 0"
      >
        <view>是否完成</view>
        <u-switch
          v-model="checked1"
          active-color="#18C7E1"
          inactive-color="#eee"
          @change="checked1Change"
        >
        </u-switch>
      </view>
      <view
        class="flex flex-j-b flex-al-c uni-item-line"
        style="padding: 20upx 0"
      >
        <view>是否上传</view>
        <u-switch
          v-model="checked2"
          active-color="#18C7E1"
          inactive-color="#eee"
          @change="checked2Change"
        >
        </u-switch>
      </view>
      <view
        v-if="checked2 == 1 && detail.record && detail.record.reportFileUrl"
        class="flex flex-j-b flex-al-c uni-item-line"
        style="padding: 20upx 0"
      >
        <view>产检报告</view>
      </view>
      <view
        class="imgbox"
        style="width: 100%"
        v-if="checked2 == 1 && detail.record && detail.record.reportFileUrl"
      >
        <view
          v-for="(item, index) in (detail.record.reportFileUrl || '').split(
            ','
          )"
        >
          <uploadimg :item="item"></uploadimg>
        </view>
      </view>
      <view
        v-if="checked2 == 1 && detail.record && detail.record.pdfFile"
        class="flex flex-j-b flex-al-c uni-item-line"
        style="padding: 20upx 0"
      >
        <view>产检报告PDF</view>
      </view>
      <view
        class="imgbox"
        style="width: 100%"
        v-if="checked2 == 1 && detail.record && detail.record.pdfFile"
      >
        <view v-for="(item, index) in (detail.record.pdfFile || '').split(',')">
          <u-button
            shape="square"
            style="margin: 30rpx"
            @click="gotopdf(item)"
            size="mini"
            ><u-icon name="file-text-fill"></u-icon>报告{{
              index + 1
            }}</u-button
          >
        </view>
      </view>
      <view
        v-if="checked2 == 1 && detail.record && detail.record.remark"
        class="flex flex-j-b flex-al-c uni-item-line"
        style="padding: 20upx 0"
      >
        <view>产检备注：{{ detail.record.remark }}</view>
      </view>
      <!-- <view v-if="checked3==1 && detail.record && detail.record.doctorImgUrl" class="flex flex-j-b flex-al-c uni-item-line"
						 style="padding: 20upx 0;">
							<view>产检报告(医生)</view>
						</view> -->
      <!-- 			<image v-if="checked2==1 && detail.record && detail.record.reportFileUrl" :src="detail.record.reportFileUrl" mode="aspectFit"
						 style=""></image> -->
      <!-- 			<view class="imgbox" style="width: 100%;" v-if="checked2==1 && detail.record && detail.record.reportFileUrl">
							<view v-for="(item,index) in (detail.record.reportFileUrl || '').split(',')">
								<uploadimg :item='item'></uploadimg>
							</view>
						</view> -->
      <!-- <view class="imgbox" style="width: 100%;" v-if="checked3==1 && detail.record && detail.record.doctorImgUrl">
						   <view v-for="(item,index) in (detail.record.doctorImgUrl || '').split(',')">
						    <uploadimg :item='item'></uploadimg>
						   </view>
						  </view> -->
    </view>
    <view v-if="checked2 == 1 && detail.record && detail.record.doctorRecord">
      <view class="title">
        <text class="txt">医生建议</text>
      </view>
      <span class="art" v-html="detail.record.doctorRecord"></span>
    </view>
    <view class="title">
      <text class="txt">产检时间</text>
    </view>
    <view class="art">{{ detail.planTime }}</view>
    <view class="title">
      <text class="txt">检前准备</text>
    </view>
    <view class="art" v-html="detail.planReady"></view>
    <view class="title">
      <text class="txt">备注</text>
    </view>
    <view class="art" v-html="detail.planRemark"></view>
    <!-- <view style="margin: 20upx 20upx;" v-show="(detail.isNeedOrder==1 && detail.checkType ==0)?true:false">
			<u-button type="primary" style="background: #24D5EA;"
				@tap="yuyueCheck">预约</u-button>
		</view> -->

    <!-- 底部弹出层 -->
    <u-popup v-model="popup" mode="bottom">
      <scroll-view scroll-x="true">
        <view>
          <view class="inp-group flex flex-al-c">
            <view class="inp-title">上传产检报告</view>
            <u-icon
              name="web-icon-"
              custom-prefix="custom-icon"
              color="#18C7E1"
              size="48px"
              @tap="uploadImg"
            ></u-icon>
          </view>
          <view class="inp-group flex flex-al-c">
            <span style="font-size: 12px; color: #999999"
              >*请将该阶段指定检查，如NT、糖筛、B超等，同时包含体重、血压、宫高、腹围、胎心、血常规、尿常规等关键指标的产检报告平整拍照上传</span
            >
          </view>
          <view class="imgbox">
            <scroll-view scroll-y="true" style="height: 300rpx" v-show="picbox">
              <view v-for="(item, index) in imgUrl">
                <uploadimg
                  :item="item"
                  :index="index"
                  :imgUrlS="imgUrl"
                  style="float: left"
                >
                </uploadimg>
              </view>
            </scroll-view>
          </view>
          <view class="inp-group flex flex-al-c">
            <view class="inp-title">产检备注</view>
            <u-input
              v-model="remark"
              :type="type"
              :border="true"
              placeholder="请输入产检备注"
            />
          </view>
          <view style="width: 90%; margin: 50upx auto 50upx">
            <button
              type="default"
              style="background: #18c7e1; color: #fff"
              @tap="subUserInfo"
            >
              保存
            </button>
          </view>
        </view>
      </scroll-view>
    </u-popup>
    <u-modal
      v-model="showConfirm"
      @confirm="confirm"
      @cancel="cancel"
      ref="uModal"
      content="是否确认取消此次产检？"
      :async-close="true"
      :show-cancel-button="true"
    ></u-modal>
  </view>
</template>

<script>
import uploadimg from "@/components/uploadimg/uploadimg";
export default {
  components: {
    uploadimg,
  },
  data() {
    return {
      type: "textarea",
      showConfirm: false,
      id: "",
      detail: {},
      checked1: false,
      checked2: false, //用户是否上传报告
      checked3: false, //医生是否上传报告
      popup: false,
      imgUrl: [], //存图片路径
      remark: "",
      ymType: "",
      picbox: false,
    };
  },
  watch: {
    popup(newv) {
      if (!newv) {
        this.getPlanDetail();
      }
    },
  },
  onLoad(options) {
    this.id = options.id;
    this.ymType = options.type;
    this.getPlanDetail();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    gotopdf(index) {
      uni.navigateTo({
        url: "../../showPdf/index?pdfUrl=" + index,
      });
    },
    confirm() {
      // uni.showToast({title: '退出成功',icon: 'none'});
      setTimeout((s) => {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        setTimeout((s) => {
          uni.hideLoading();
        }, 5000);
        this.config
          .get("/agency/planGravidPrenatalCheck/cancelUploadState", {
            id: this.detail.record ? this.detail.record.id : "",
            planId: this.id,
          })
          .then((res) => {
            uni.hideLoading();
            this.imgUrl = "";
            this.remark = "";
            if (res.data.code === 200) {
              this.getPlanDetail();
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          });
      }, 500);
      this.showConfirm = false;
    },
    cancel() {
      this.checked3 = true;
      this.checked2 = true;
      this.showConfirm = false;
    },
    getPlanDetail() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get(
          "/agency/planGravidPrenatalCheck/getPlanGravidPrenatalCheckByPlanId",
          {
            planId: this.id,
          }
        )
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.detail = res.data.data;
            if (res.data.data.checkType == "2") {
              self.checked1 = true;
            } else {
              self.checked1 = false;
            }
            if (res.data.data.isUpload == "1") {
              self.checked2 = true;
            } else {
              self.checked2 = false;
            }
            if (res.data.data.doctorIsUpload == "1") {
              self.checked3 = true;
            } else {
              self.checked3 = false;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 点击是否完成
    checked1Change() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/agency/planGravidPrenatalCheck/switchRecord", {
          id: this.detail.record ? this.detail.record.id : "",
          planId: this.id,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            this.getPlanDetail();
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
            });
            if (this.checked1 == false) {
              this.checked1 = true;
            }
          }
        });
    },

    // 点击是否上传
    checked2Change() {
      if (this.detail.record) {
        this.detail.record.remark = "";
      }
      if (this.checked2) {
        this.popup = true;
      } else {
        this.showConfirm = true;
      }
    },
    subUserInfo() {
      if (this.imgUrl.length == 0) {
        uni.showToast({
          title: "请上传体检报告",
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/agency/planGravidPrenatalCheck/accomplishPlanChrInoculation", {
          planId: this.id,
          reportFileUrl: this.imgUrl.toString(),
          remark: this.remark,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            this.popup = false;
            this.checked2 = true;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    uploadImg() {
      let self = this;
      uni.chooseImage({
        count: 1,
        sizeType: "compressed",
        sourceType: ["album"],
        success(res) {
          uni.showLoading({
            title: "加载中",
            mask: true,
            duration: 5000,
          });
          setTimeout((s) => {
            uni.hideLoading();
          }, 5000);
          self.config.upload(
            res.tempFiles[0],
            (file) => {
              uni.hideLoading();
              // //console.log('上传成功了:', file)
              if (file.code === 200) {
                self.picbox = true;
                self.imgUrl.push(file.msg);
              } else {
                uni.showToast({
                  title: file.message,
                  icon: "none",
                });
              }
            },
            (progress) => {
              // //console.log('进度：' + progress)
            }
          );
        },
      });
    },
    yuyueCheck() {
      uni.navigateTo({
        url: "/pages/main/child/backlog/calendar?type=4&name=产检预约",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.inp-group {
  padding: 0 20upx;
  margin: 30upx 0;

  .inp-title {
    width: 200upx;
  }
}

.title {
  padding: 20upx 50upx;
  background-color: #eee;

  .txt {
    padding: 0 20upx;
    border-left: 8upx solid #18c7e1;
  }
}

.art {
  padding: 30upx 50upx;
  line-height: 46upx;
  // text-indent: 50upx;
}

uni-view.imgbox {
  width: 100%;
  display: flex;
  flex-direction: row;
  overflow-x: scroll !important;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .title {
    background-color: #000000 !important;
    color: #ccc !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .art {
    color: #ccc !important;
  }
  >>> span {
    color: #ccc !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>